/*----------------------------------------*\
  QUOTE
\*----------------------------------------*/

.quote {
  @apply container__center--md gap--responsive;
  @apply grid justify-center;

  grid-template-columns: repeat(2, minmax(min-content, max-content));
  grid-template-areas: 'A B';

  @apply text-text-600;

  .bg--secondary-500 &,
  .bg--secondary-600 &,
  .bg--secondary-700 &,
  .bg--secondary-800 &,
  .bg--secondary-900 & {
    @apply text-white;
  }

  figcaption {
    @apply text-inherit;
  }
}

.quote-font-size {
  @apply xs:text-lg md:text-xl lg:text-2xl xl:text-3xl 3xl:text-4xl;
}

.quote__text {
  @apply flex flex-col h-full justify-center;
  @apply lg:pl-9 xl:pl-0;
}

.quote__title {
  @apply pt-0 pb-2 relative;
  @apply quote-font-size;
  @apply text--bold;
  @apply lg:-indent-9;

  &::before {
    content: '\00ab';
    @apply leading-[0];

    @apply block absolute;
    @apply text-4xl;
    @apply -top-4;

    @apply lg:inline lg:relative;
    @apply lg:text-6xl;
    @apply lg:top-[0.05em];
  }

  &::after {
    content: ' \00bb';
    @apply relative top-[0.05em];
    @apply text-4xl lg:text-6xl;
    @apply leading-[0];
  }
}

.quote__author {
  @apply text--sm;
}

.quote__image {
  @apply h-16 w-16;
  @apply md:h-28 md:w-28;
  @apply lg:h-36 lg:w-36;
  @apply xl:h-40 xl:w-40;
  @apply 2xl:h-44 2xl:w-44;

  picture,
  img {
    @apply w-full h-full object-cover;
  }
}

blockquote {
  @apply quote__title;
  @apply quote-font-size;

  @apply pt-12 pb-10;
  @apply lg:py-14;

  .container__center--xs & {
    @apply broader-than-container-centered;
  }

  &::before {
    @apply top-8 lg:top-0;
  }
}
